<template>
    <div class="tanxin tianjia">
        <span>
            数据列表
        </span>
        <div>
        </div>
    </div>
    <div class="table">
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="id" label="编号" width="80" align="center" />
            <el-table-column prop="name" label="秒杀时间段名称" width="180" align="center" />
            <el-table-column label="每日开始时间" width="200">
                <template #default="scope">
                    {{ scope.row.startTime ? dayjs(scope.row.startTime).format('YYYY-MM-DD HH:mm:ss') : '' }}
                </template>
            </el-table-column>
            <el-table-column label="每日结束时间" width="200">
                <template #default="scope">
                    {{ scope.row.endTime ? dayjs(scope.row.endTime).format('YYYY-MM-DD HH:mm:ss') : '' }}
                </template>
            </el-table-column>
            <el-table-column prop="productCount" label="商品数量" align="center" />
            <el-table-column label="操作">
                <template #default="scope">
                    <div class="tanxin" style="width: 70%;margin: 0 auto;color: skyblue;">
                        <a @click="ondelet(scope.row.id)"> 商品列表</a>
                    </div>

                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import * as api from '../../request/api'
import { useRoute, useRouter } from 'vue-router'
import dayjs from 'dayjs'
let router = useRouter()
// 表格数据
let tableData = ref()
// 传过来的ID
let flashPromotionId = ref()
// 获取tableData数据

let ontableData = async () => {
    // 通过路由拿到传过来的id进行网络请求
    flashPromotionId.value = Number(useRoute().query.flashPromotionId)
    tableData.value = await api.yxadmin.selectListSession(flashPromotionId.value)
}

ontableData()
let ondelet = (id: number) => {
    // 点击路由跳转
    router.push(`/sms/flashProductRelation?flashPromotionId=${flashPromotionId.value}&flashPromotionSessionId=${id}`)
}
</script>

<style scoped lang="scss">
.tianjia {
    margin: 20px;
    padding: 20px;
    height: 60px;
    box-sizing: border-box;
    margin-top: 20px;
    padding: 20px;
    border-radius: 5px;
    // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    border: 1px solid #eee;
    align-items: center;
    font-size: 14px;
    margin-bottom: 20px;
}

.table {
    margin: 20px;
    border: 1px solid #eee;
}
</style>